<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;text-align: center">
      <el-form :inline="true" :model="query">
<!--        <el-form-item>-->
<!--          <el-input v-model="query.keyword" placeholder="Keyword" style="width:100px"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item>-->
<!--          <el-button type="primary" v-on:click="search">搜索</el-button>-->
<!--        </el-form-item>-->
        <el-form-item style="float: left">
          <el-input v-model="query.userid" placeholder="用户ID" style="width:200px"></el-input>
        </el-form-item>
        <el-date-picker
            v-model="query.time"
            type="date"
            style="width: 140px; height: 50px;float: left"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            @change="search"
            placeholder="选择日期">
        </el-date-picker>
        <el-select v-model="query.type" placeholder="账单类型" @change="selectChange" clearable style="width: 120px; height: 40px;float: left;"  >
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            {{ item.label }}
          </el-option>
        </el-select>

        <el-form-item style="float: left">
          <el-button type="primary" v-on:click="search">查询</el-button>
        </el-form-item>

        <el-form-item style="float: left">
          <el-button type="primary" v-on:click="billsearch" >账单查询</el-button>
        </el-form-item>

        <el-form-item style="float: left">
          <el-input v-model="billusernamequery.name" placeholder="用户名称" style="width:200px" clearable></el-input>
        </el-form-item>
        <el-form-item style="float: left">
          <el-button type="primary" v-on:click="searchByusername">用户名称查询</el-button>
          <el-button type="danger" @click="deleteByDateBill"  style="margin-left: 8px;">日期删除</el-button>
        </el-form-item>

<!--        <el-date-picker-->
<!--            v-model="time"-->
<!--            type="date"-->
<!--            style="width: 140px; height: 40px;"-->
<!--            format="yyyy-MM-dd"-->
<!--            value-format="yyyy-MM-dd"-->
<!--            @change="loadRefundBillByTime"-->
<!--            placeholder="选择日期">-->
<!--        </el-date-picker>-->
        <!--        <el-form-item>-->
        <!--          <el-button type="primary" @click="handleAdd">新增</el-button>-->
        <!--        </el-form-item>-->
      </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="pageInfo.rows" highlight-current-row v-loading="listLoading" @selection-change="selsChange"
              style="width: 100%;">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column type="index" width="100">
      </el-table-column>
      <el-table-column prop="type" label="消费类型" width="100" sortable>
        <template slot-scope="scope">
          <!--          <span v-if="scope.row.goods.type == 1">关注</span>-->
          <span v-if="scope.row.type == 1">充值</span>
          <span v-if="scope.row.type == 2">消费</span>
          <span v-if="scope.row.type == 21">消费--关注</span>
          <span v-if="scope.row.type == 22">消费--转发</span>
          <span v-if="scope.row.type == 23">消费--评论</span>
          <span v-if="scope.row.type == 24">消费--点赞</span>
          <span v-if="scope.row.type == 25">消费--阅读</span>
          <span v-if="scope.row.type == 26">消费--视频播放</span>
          <span v-if="scope.row.type == 27">消费--真人转评赞</span>
          <span v-if="scope.row.type == 28">消费--统一转评赞</span>
          <span v-if="scope.row.type == 29">消费--评中评</span>
          <span v-if="scope.row.type == 30">消费--内评赞</span>
          <span v-if="scope.row.type == 3">退款</span>
        </template>
      </el-table-column>
      <el-table-column prop="money" label="金额" width="100" sortable>
      </el-table-column>
      <el-table-column prop="time" label="日期" width="150" sortable>
      </el-table-column>
      <el-table-column prop="user.username" label="用户名称" width="150" sortable>
      </el-table-column>
      <el-table-column prop="balance" label="用户操作后余额" width="200" sortable>
      </el-table-column>
      <el-table-column prop="user.id" label="用户ID" width="200" sortable>
      </el-table-column>
      <!--      <el-table-column label="操作" width="250">-->
      <!--        <template scope="scope">-->
      <!--          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>-->
      <!--          <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">Delete</el-button>-->
      <!--          <el-button type="success" size="small" @click="handleRole(scope.$index, scope.row)">Set-Role</el-button>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
<!--      <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">Batch-Delete</el-button>-->
      <!--      @size-change 当每页显示条数的值发生改变时会触发-->
      <!--      @current-change 当 当前页的值发生改变时会触发-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="query.pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total"
          :current-page="query.currentPage"
          style="float: right">
      </el-pagination>
    </el-col>

    <!--编辑界面-->
    <el-dialog title="账单/总金额查询" :visible.sync="billvisible" :close-on-click-modal="false">
      <el-form :model="Billvo" label-width="80px"  ref="addForm">
        <el-form-item label="查询规则:">
          <el-input
              placeholder=""
              v-model="rulemessage"
              :disabled="true"
              style="width: 600px; height: 40px;"
          ></el-input>
          <el-button type="primary" @click="searchByTypeA">查询总充值</el-button>
          <el-button type="primary" @click="searchByTypeB">查询总消费</el-button>
          <el-button type="primary" @click="searchByTypeC">查询总退款</el-button>
          <el-button type="primary" @click="searchByAllBalace">查询总余额</el-button>
        </el-form-item>

        <el-date-picker
            v-model="Billvo.time"
            type="date"
            style="width: 140px; height: 50px;float: left"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            @change="searchByAll"
            placeholder="选择日期">
        </el-date-picker>
        <el-input v-model="Billvo.userid" placeholder="请输入用户ID" style="width: 150px;" clearable></el-input>
        <el-select v-model="Billvo.type" placeholder="账单类型" @change="selectChangeByall" clearable style="width: 200px; height: 100px;" >

          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            {{ item.label }}
          </el-option>
        </el-select>
        <el-button type="primary" @click="searchByAll">查询总账单</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
        <el-row class="input-row">
          <el-col>
            <el-form-item label="充值金额"
                          :label-style="{ width: '100px' }">
              <el-input
                  placeholder="充值金额"
                  v-model="loadByall.moneyA"
                  :disabled="true"
                  style="width: 140px; height: 40px;"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col>
            <!-- 假设这里还有一个显示框，使用相同的 :span="8" -->
            <el-form-item label="消费金额">
              <el-input
                  placeholder="消费金额"
                  v-model="loadByall.moneyB"
                  :disabled="true"
                  style="width: 140px; height: 40px;"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col >
            <!-- 假设这里还有第三个显示框，使用相同的 :span="8" -->
            <el-form-item label="退款金额">
              <el-input
                  placeholder="退款金额"
                  v-model="loadByall.moneyC"
                  :disabled="true"
                  style="width: 140px; height: 40px;"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col >
            <!-- 假设这里还有第三个显示框，使用相同的 :span="8" -->
            <el-form-item label="余额">
              <el-input
                  placeholder="余额"
                  v-model="loadByall.balance"
                  :disabled="true"
                  style="width: 140px; height: 40px;"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="billvisible = false">取消</el-button>
        <el-button type="primary" @click.native="saveSubmit" :loading="addLoading">完成</el-button>
      </div>
    </el-dialog>

    <!--日期删除界面-->
    <el-dialog title="根据日期删除" :visible.sync="deleteFormVisible" :close-on-click-modal="false" width="1500">
      <el-date-picker
          v-model="DeleteDto.time"
          type="date"
          style="width: 140px; height: 40px;margin-right: 10px;"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          @change=""
          placeholder="选择日期">
      </el-date-picker>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" @click="deleteBytimebill">确定删除</el-button>
        <el-button @click.native="deleteFormVisible = false">取消</el-button>
        <!--            <el-button type="primary" @click.native="save" :loading="addLoading">提交</el-button>-->
      </div>
    </el-dialog>

  </section>
</template>

<script>


export default {
  data() {
    return {
      deleteFormVisible:false,
      DeleteDto:{
        time:null,
      },
      rulemessage:"自由组合,输入用户ID需要点击查询总账单",
      loadByall:{
        moneyA:"", //充值
        moneyB:"", //消费
        moneyC:"", //退款
        balance:'',//余额
      },
      billusernamequery: {
        currentPage: 1,
        pageSize: 20,
        name:"",
      },
      allmoney:[],
      pageInfo: {
        rows: [],
        total: 0
      },
      billvisible:false,
      query: {
        currentPage: 1,
        pageSize: 20,
        keyword: "",
        time:'',
        userid:'',
        type:'',
        username:''
      },
      Billvo:{
        time:'',
        userid:'',
        type:''
      },
      BillvoAll:{
        time:'',
        userid:'',
        type:''
      },
      time: null,

      listLoading: false,
      sels: [],//列表选中列

      addLoading: false,

      //编辑界面数据
      billForm: {
        time:'',
        id: null,
        money1:'',
        money2:'',
      },
      options:[{
        value: '1',
        label: '充值'
      }, {
        value: '2',
        label: '消费'
      }, {
        value: '3',
        label: '退款'
      }],

    }
  },
  methods: {
    deleteByDateBill(){
      this.deleteFormVisible = true;
    },
    deleteBytimebill(){
      this.$http.post("/bill/deleteBytime",this.DeleteDto)
          .then(result => {
            result = result.data;
            if (result.success) {
              this.deleteFormVisible = false;
              this.getBill();
              this.$message({message: result.message, type: 'success'});
            } else {
              this.$message({message: result.message, type: 'error'});
            }
          })
    },
    saveSubmit(){
      this.billvisible = false;
    },

    selectChange(event) {
      this.selectedOption = event;
      this.query.type = this.selectedOption;
      this.search();
    },
    selectChangeByall(event){
      this.Billvo.type = event;
      this.searchByAll();
    },


    //全选按钮
    handleCheckAllChange(val) {
      this.EmployeeRole.roleId = val ? this.allRoleIds : []
      this.isIndeterminate = false;
    },

    // 处理选择事件
    handleCheck() {
      // 获取已选中的长度
      let checkedLength = this.EmployeeRole.roleId.length;
      // 如果已选中的长度==所有权限的长度，则checkAll=true，也就是全选框被选中
      this.checkAll = checkedLength === this.allRoleIds.length;
      // 如果已选中的长度>0并且已选中的长度<所有权限的长度，则全选框是一个横杠
      this.isIndeterminate = checkedLength > 0 && checkedLength < this.allRoleIds.length;
    },

    // 搜索
    billsearch(){
      this.billvisible = true;
    },
    search() {
      // 设置query.currengPage为1,当进行搜索时,从第一页开始重新进行搜索
      this.query.currentPage = 1;
      //调用查询
      this.getBill();
    },
    searchByusername(){
      this.$http.post("/bill/searchByusername", this.billusernamequery)
          .then(result => {
            result = result.data;
            if (result.success) {
              this.$message({message: "查询成功", type: 'success'});
              this.pageInfo = result.resultObj;
              // console.log(this.pageInfo)
            } else {
              this.$message({message: result.message, type: 'error'});
            }
          })
          .catch(result => {

          })
    },
    searchByTypeA(){
      this.BillvoAll.type=1;
      this.searchByAllM()
    },
    searchByTypeB(){
      this.BillvoAll.type=2;
      this.searchByAllM()
    },
    searchByTypeC(){
      this.BillvoAll.type=3;
      this.searchByAllM()
    },
    searchByAllBalace(){
      this.$http.get("/user/getBalaceAll")
          .then(result => {
            result = result.data;
            if (result.success) {
              this.$message({message: "查询成功", type: 'success'});
              this.loadByall.balance = result.resultObj;
              // console.log(this.pageInfo)
            } else {
              this.$message({message: result.message, type: 'error'});
            }
          })
          .catch(result => {

          })
    },
    reset(){
      this.Billvo.userid = null;
      this.Billvo.type = null;
      this.Billvo.userid = null;
      this.loadByall.moneyA = 0;
      this.loadByall.moneyB = 0;
      this.loadByall.moneyC = 0;


    },
    searchByAllM(){
      this.$http.post("/bill/getBillBymoeny", this.BillvoAll)
          .then(result => {
            result = result.data;
            if (result.success) {
              this.$message({message: "查询成功", type: 'success'});
              // console.log("----------")
              // console.log(result.resultObj)
              // console.log("----------")
              if(this.BillvoAll.type == 1){
                this.loadByall.moneyA = result.resultObj.consumption;
              }
              if(this.BillvoAll.type == 2){
                this.loadByall.moneyB = result.resultObj.consumption;
              }
              if(this.BillvoAll.type == 3){
                this.loadByall.moneyC = result.resultObj.consumption;
              }
              // console.log(this.pageInfo)
            } else {
              this.loadByall.moneyA = 0;
              this.loadByall.moneyB = 0;
              this.loadByall.moneyC = 0;
              this.$message({message: result.message, type: 'error'});
            }
          })
          .catch(result => {

          })
    },
    searchByAll(){
      this.$http.post("/bill/getBillBymoeny", this.Billvo)
          .then(result => {
            result = result.data;
            if (result.success) {
              this.$message({message: "查询成功", type: 'success'});
              console.log("----------")
              console.log(result.resultObj)
              console.log("----------")
              if(this.Billvo.type == 1){
                this.loadByall.moneyA = result.resultObj.consumption;
              }
              if(this.Billvo.type == 2){
                this.loadByall.moneyB = result.resultObj.consumption;
              }
              if(this.Billvo.type == 3){
                this.loadByall.moneyC = result.resultObj.consumption;
              }
              console.log("==========")
              console.log(this.loadByall.moneyA)
              console.log(this.loadByall.moneyB)
              console.log(this.loadByall.moneyC)
              console.log("==========")
              // console.log(this.pageInfo)
            } else {
              this.loadByall.moneyA = 0;
              this.loadByall.moneyB = 0;
              this.loadByall.moneyC = 0;
              this.$message({message: result.message, type: 'error'});
            }
          })
          .catch(result => {

          })
    },

    handleSizeChange(val) {
      this.query.pageSize = val;
      this.query.currentPage = 1;
      //查询结果
      this.getBill();
    },

    handleCurrentChange(val) {
      // val为当前页，赋值后重新进行查询
      this.query.currentPage = val;
      // 调用查询方法
      this.getBill();
    },

    // 获取用户反馈列表
    getBill() {
      this.$http.post("/bill", this.query)
          .then(result => {
            result = result.data;
            if (result.success) {
              this.$message({message: "查询成功", type: 'success'});
              this.pageInfo = result.resultObj;
              // console.log(this.pageInfo)
            } else {
              this.$message({message: result.message, type: 'error'});
            }
          })
          .catch(result => {

          })
    },

    // 用户删除
    handleDel: function (index, row) {
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        this.$http.delete("/manager/" + row.id)
            .then(result => {
              result = result.data;
              this.listLoading = false;
              if (result.success) {
                this.$message({message: '删除成功', type: 'success'});
                //删除成功后回到第一页
                this.query.currentPage = 1;
                // 删除成功,要重新刷新该页面，调用方法查询
                this.getBill();
              } else {
                this.$message({message: result.message, type: 'error'});
              }
            })
            .catch(result => {
              this.$message({message: '很抱歉，网络有误', type: 'error'});
            })
      }).catch(() => {
        this.$message({message: '已取消删除', type: 'info'});
      });
    },

    // 显示修改界面(回显数据)
    handleEdit: function (index, row) {
      this.saveFormVisible = true;
      this.saveForm = Object.assign({}, row);
      //调用方法让下拉框有值
    },

    // 显示新增界面
    // handleAdd: function () {
    //   this.saveFormVisible = true;
    //   this.saveForm = {
    //     id: null,
    //     managername: '',
    //     password: '',
    //     email: '',
    //     headImage: '',
    //     age: null,
    //     department: {
    //       id: null,
    //       name: ""
    //     }
    //   };
    // },

    // 提交
    // saveSubmit: function () {
    //   this.$refs.addForm.validate((valid) => {
    //     if (valid) {
    //       this.$confirm('确认提交吗？', '提示', {}).then(() => {
    //         this.addLoading = true;
    //         var para = this.saveForm;
    //         this.$http.post("/manager/save", para)
    //             .then(result => {
    //               result = result.data;
    //               if (result.success) {
    //                 //从第一页开始展示
    //                 this.query.currentPage = 1;
    //                 this.getBill();
    //                 //关闭加载框
    //                 this.addLoading = false;
    //                 //关闭弹框
    //                 this.saveFormVisible = false;
    //                 this.$message({message: '保存成功', type: 'success'});
    //               }
    //             }).catch(result => {
    //           this.$message({message: '网络错误', type: 'error'});
    //         })
    //       });
    //     }
    //   });
    // },

    selsChange: function (sels) {
      this.sels = sels;
    },

    // 批量删除员工
    // batchRemove: function () {
    //   //遍历选中的sels数组的id值给ids
    //   var ids = this.sels.map(item => item.id);
    //   this.$confirm('确认删除选中记录吗？', '提示', {
    //     type: 'warning'
    //   }).then(() => {
    //     this.listLoading = true;
    //     // 调用批量删除接口
    //     this.$http.patch("/manager", ids)
    //         .then(result => {
    //           result = result.data;
    //           this.listLoading = false;
    //           if (result.success) {
    //             this.$message({message: '批量删除成功!', type: 'success'});
    //             //删除后回到第一页
    //             this.query.currentPage = 1;
    //             //调用查询
    //             this.getBill();
    //           } else {
    //             this.$message({message: result.message, type: 'error'});
    //           }
    //         })
    //   }).catch(() => {
    //     this.$message({message: "网络错误", type: 'error'});
    //   });
    // }
  },

  mounted() {
    // 钩子函数，页面加载后，调用此方法，加载部门
    this.getBill();
  }
}

</script>

<style scoped>

</style>
